 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>现实中的文字效果</title>
</head>
<style>	
	body {
		margin: 0;
		padding: 0;
	}
	p {
		padding: 50px;
		margin-bottom: 20px;
	}
	.p1 {
		background: hsl(210,13%,60%);
		color: hsl(210, 13%, 30%);
		text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
	}
	.p2 {
		background: hsl(210,13%,40%);
		color: hsl(210, 13%, 75%);
		text-shadow: 0 -1px 1px black;
	}
	.p3 {
		background: deeppink;
		color: white;
		text-shadow: 1px 1px black, -1px -1px black,
					1px -1px black, -1px 1px black;
	}
	.p4 {
		background: deeppink;
		color: white;
		text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black;
	}
	.p5 {
		background: deeppink;
		color: white;
		text-shadow: 3px 3px black, -3px -3px black,
					3px -3px black, -3px 3px black;
	}
	h1 {
		font: 500%/1 Rockwell, serif;
		background: deeppink;
		color: white;
	}
	h1 text {
		fill: currentColor;
	}
	h1 svg {
		overflow: visible;
	}
	h1 use {
		stroke: black;
		stroke-width: 6;
		stroke-linejoin: round;
	}
	.glow {
		font: 500%/1 Rockwell, serif;
		display: inline-block;
		width: 300px;
		height: 300px;
		line-height: 300px;
		text-align: center;
		background: #203;
		color: #ffc;
		transition: 1s;
		text-decoration: none;
	}
	.glow:hover {
		color: transparent;
		text-shadow: 0 0 .3em white; 
	}
	.CSS3d {
		text-decoration: none;
		font: 500%/1 Rockwell, serif;
		display: inline-block;
		width: 300px;
		height: 300px;
		line-height: 300px;
		text-align: center;
		background: #58a;
		color: $white;
		text-shadow: 0 1px hsl(0, 0%, 85%), 0 2px hsl(0,0%, 80%), 0 3px hsl(0, 0%, 75%), 0 4px hsl(0, 0%, 70%), 0 5px hsl(0,0%,65%), 0 5px 10px black;
	}
	.RETRO {
		text-decoration: none;
		font: 500%/1 Rockwell, serif;
		display: inline-block;
		width: 300px;
		height: 300px;
		line-height: 300px;
		text-align: center;
		color: white;
		background: hsl(0, 50%, 45%);
		text-shadow: 1px 1px black,2px 2px black,3px 3px black,4px 4px black,5px 5px black,6px 6px black,7px 7px black,8px 8px black;
	}
</style>
<body>
	<p class="p1"> Attitude decides everything.</p>
	<p class="p2"> Attitude decides everything.</p>
	<p class="p3"> Attitude decides everything.</p>
	<p class="p4"> Attitude decides everything.</p>
	<p class="p5"> Attitude decides everything.</p>

	<h1>
		<svg width="2em" height="1.2em">
			<use xlink:href="#css" />
			<text id="css" y="1em">CSS</text>
		</svg>
	</h1>

	<a href="javascript:;" class="glow">Glow</a>
	
	<a href="javascript:;" class="CSS3d">CSS3d</a>

	<a href="javascript:;" class="RETRO">RETRO</a>

</body>
</html>